<template>
	<view class="Map">
		<map :style="{width,height}" style="border-radius: 10rpx;" :latitude="address_info.latitude"
			:longitude="address_info.longitude" :markers="markers">
		</map>
	</view>
</template>

<script setup lang="ts">
	import { computed, reactive } from 'vue';
	interface propsType {
		/** 高度*/
		height ?: string
		/** 宽度*/
		width ?: string
		/** 标记点用于在地图上显示标记的位置*/
		covers : {
			/**位置的经度*/
			longitude : number,
			/**位置的纬度*/
			latitude : number
			/**ico标记图标*/
			iconPath ?: string
			/**ico标记宽度*/
			width ?: number
			/**ico标记高度*/
			height ?: number
		}[]
	}
	const props = withDefaults(defineProps<propsType>(), {
		height: '300rpx',
		width: '100%'
	})
	/** 位置信息*/
	const address_info = reactive({
		/**当前位置的经度*/
		longitude: null,
		/**当前位置的纬度*/
		latitude: null
	})
	// const covers = reactive([{
	// 	latitude: address_info.latitude || 110,
	// 	longitude: address_info.longitude || 69,
	// 	iconPath: '../../static/detail/address_ico.png'
	// }])
	const markers = computed(() => {
		const new_list = []
		if (props.covers && props.covers.length !== 0) {
			props.covers.forEach(item => {
				item.iconPath = '../../static/detail/address_ico.png'
				item.width = 30
				item.height = 30
			})
		} else {
			const obj = {
				latitude: address_info.latitude || 110,
				longitude: address_info.longitude || 69,
				iconPath: '../../static/detail/address_ico.png',
				width: 15,
				height: 15,
			}
			new_list.push(obj)
		}
		return new_list
	})
	/** 获取基本信息*/
	uni.getLocation({
		type: 'wgs84',
		success: function (res) {
			const { longitude, latitude } = res;
			address_info.longitude = longitude;
			address_info.latitude = latitude;
		}
	});
</script>

<style lang="scss" scoped>

</style>